<template>
  <a-card title="快捷操作" :bordered="false" size="medium" style="overflow: hidden">
    <a-card-grid :style="{ width: '33.33%' }" v-for="(item, index) in list" :key="item.name" class="card-grid-item">
      <a-card @click="cardClick(item)" :bordered="false" hoverable>
        <a-row justify="center" align="center" :class="'animated-fade-up-' + (index + 1)">
          <a-space direction="vertical" align="center">
            <component :is="item.icon" :size="30" :style="{ color: item.color }"></component>
            <span class="text">{{ item.name }}</span>
          </a-space>
        </a-row>
      </a-card>
    </a-card-grid>
  </a-card>
</template>

<script setup lang="ts">
// 引入
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()
const list = ref([
  { name: '设备管理', icon: 'icon-dashboard', color: 'rgb(104, 199, 85)' },
  { name: '用户管理', icon: 'icon-list', color: 'rgb(250, 178, 81)' },
  { name: '文件管理', icon: 'icon-mind-mapping', color: 'rgb(240, 107, 150)' },
  { name: '个人设置', icon: 'icon-notification', color: 'rgb(92, 219, 211)' },
  { name: '数据字典', icon: 'icon-mind-mapping', color: 'rgb(104, 199, 85)' },
  { name: '注册设备', icon: 'icon-safe', color: 'rgb(104, 199, 85)' }
])

// 卡片的点击事件
const cardClick = (item: any) => {
  switch (item.name) {
    case '设备管理':
      router.push({ path: '/equipment' })
      break
    case '用户管理':
      router.push({ path: '/user' })
      break
    case '文件管理':
      router.push({ path: '/files' })
      break
    case '个人设置':
      router.push({ path: '/personageSet' })
      break
    case '数据字典':
      router.push({ path: '/information' })
      break
    case '注册设备':
      router.push({ path: '/registerDev' })
      break
    default:
      break
  }
}
</script>

<style lang="scss" scoped>
:deep(.arco-card-header) {
  border: none;
}
.card-grid-item {
  cursor: pointer;
}
</style>
